<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=320px, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="../static/indexm.css">
    <!-- <link rel="stylesheet" href="https://cdn.statishishihshi dhcfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="head">
        <table style="height: 100%; width: 100%; ">
            <tr>
                <td>
                    <a href="/login">登录注册</a>
                </td>
                <td>
                    <a href="#basic">地理信息</a>
                </td>
                <td>
                    <a href="#weather">天气信息</a>
                </td>
                <td>
                    <a href="#solar">太阳角度</a>
                </td>
            </tr>
        </table>
    </div>
    <div class="main">
        <!-- <div class="padpart"> -->
        <h1>保定第十七中学气象站</h1>
        <h3>Weather station of Baoding NO17 middle school</h3>
        <!-- </div> -->
    </div>
    <div style="width: 100%; height: 10x"></div>

    <div class="main">
        <table style="width: 100%; border-color: rgba(255, 255, 255, 0);">
            <tr>
                <td class="buttons">
                    <form action="/settings">
                        <button class="button"
                            style="background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);">基本设置</button>
                    </form>
                </td>
                <td class="blocks"></td>
                <td class="buttons">
                    <form action="/history">
                        <button class="button"
                            style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">历史数据</button>
                    </form>
                </td>
                <td class="blocks"></td>
                <td class="buttons">
                    <form action="/future">
                        <button class="button"
                            style="background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);">天气预报</button>
                    </form>
                </td>
                <td class="blocks"></td>
                <td class="buttons">
                    <form action="/user">
                        <button class="button"
                            style="background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);">用户中心</button>
                    </form>
                </td>
            </tr>
        </table>
    </div>

    <div class="main" id="basic">
        <h2>地理信息</h2>
        <p id="time"></p>
        <p>位置：{{location}}</p>
        <p>IP：{{ip}}</p>
    </div>
    <div class="main" id="weather">
        <h2>天气情况：{{weather["basic"]}}</h2>
        <p>当前温度：{{weather["temperature"]}}℃</p>
        <iframe src="/charts/temperature" frameborder="0"></iframe>
        <p>当前湿度：{{weather["humidity"]}}</p>
        <iframe src="/charts/humidity" frameborder="0"></iframe>
        <p>当前紫外线强度：{{uv}}</p>
        <iframe src="/charts/uv" frameborder="0"></iframe>
        <p>当前降水：{{rain}}</p>
        <iframe src="/charts/rain" frameborder="0"></iframe>
        <p>当前大气压强：{{weather["pressure"]}}</p>
        <iframe src="/charts/pressure" frameborder="0"></iframe>
        <p>当前风速：{{weather["wind_speed"]}}</p>
        <iframe src="/charts/wind_speed" frameborder="0"></iframe>
    </div>
    <div id="solar" class="main">
        <h2>太阳角度：</h2>
        <p>太阳高度角：{{altitude_angle}}</p>
        <p>太阳方位角：{{azimuth_angle}}</p>
        <form action="" method="post" style="text-align: center;">
            <button>计算角度</button>
        </form>
        
    </div>

    <script>
        function displayTime()
        {
            var date = "时间："+Date().split(" GMT")[0];
            document.getElementById("time").innerHTML = date;
            setTimeout(displayTime,1000); 
        }
        window.onload = displayTime;
    </script>

</body>
<script>
    function daytea()
    {

    }
</script>
</html>